<template>
    <div id="bottomRight">
        <div class="bg-color-black">
            <div>
                <div class="bott-let">项目总人数</div>
                <div class= "shuzi"><span>{{this.total}}</span></div>
                <div class="bott-let">进场人数</div>
                <div class=" shuzi"><span>{{this.presentPeople}}</span></div>
                <div class="bott-let">出场人数</div>
                <div class=" shuzi"><span>{{this.offsitePreople}}</span></div>
            </div>
            </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
              //进场人数
              presentPeople:0,
              //场内总人数
              total:0,
              offsitePreople:0
            };
        },
        components: {
            // BottomRightChart
        },
        created() {
            this.initWebSocket();
          // this.loginBtn()
        },
        methods: {
            loginBtn() {
                const api = "http://192.168.10.175:8088/device/getRedisDeptThosePresentTotal";
                this.$axios({
                    url: api,
                    method: "get",
                    //用于表示用户代理是否在跨域请求的情况下从其他域中发送cookies
                    withCredentials: true,//默认为false
                }).then(res => {
                  // console.log("-------------人数")
                  // console.log(res)
                  //赋值总人数
                  this.total=res.data.total;
                  //赋值进场人数
                  this.presentPeople=res.data.presentPeople;
                  this.offsitePreople=res.data.offsitePreople
                });
            },
          // cancelLoading() {
          //   setTimeout(() => {
          //    this.loginBtn()
          //   }, 3000);
          // }
          //websocket 长链接   用于生成收款码 实时判断等
          //初始化weosocket
          initWebSocket() {
            if (typeof WebSocket === 'undefined') {  //判断浏览器是否支持
              alert('您的浏览器不支持WebSocket')
              return false
            }
            var userName = this.list    //获取当前登录用户信息
            // const wsuri = 'ws://cloud.lgdz-aiti.cn/prod-api/websocket/' + userName  //线上
            const wsuri = 'ws://192.168.10.175:8088/ws/asset/'+ 3 //线下

            this.websock = new WebSocket(wsuri)               //初始化socket方法
            this.websock.onopen = this.websocketonopen     //连接成功的处理
            this.websock.onmessage = this.websocketonmessage //接收数据之后的处理
            this.websock.onerror = this.websocketonerror     //报错的处理
            this.websock.onclose = this.websocketclose       //关闭连接的处理
          },
          //连接成功
          websocketonopen() {
            console.log('WebSocket本机连接成功333')
            this.loginBtn()
            // 添加心跳检测，每300秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
            let self = this
            // this.timer = setInterval(() => {
            //   try {
            //     const jsonHeart = {
            //       'Status': 'heart',            //向服务端标明 本机心跳
            //       'user': this.list                    //同时携带登录用户信息
            //     }
            //     self.websock.send(JSON.stringify(jsonHeart))  //发送消息
            //   } catch (err) {
            //     console.log('断开了：' + err)
            //     self.connection()
            //   }
            // }, 300000)  // 定时发送
          },
          //接收后端返回的数据，可以根据需要进行处理 实时监控数量
          websocketonmessage(e) {
            // console.log("----------------人数")

            const userName = this.list     //获取当前登录用户信息
            var res = JSON.parse(e.data) //将JSON字符串转换成一个对象
            // var res = e.data //将JSON字符串转换成一个对象
            // console.log(res)
                    //赋值总人数
                    this.total=res.total;
                    //赋值进场人数
                    this.presentPeople=res.presentPeople;
                    //出場
            this.offsitePreople=res.offsitePreople
          },
          //连接建立失败重连
          websocketonerror(e) {
            // console.log(`连接失败的信息：`, e)
            this.initWebSocket() // 连接失败后尝试重新连接
          },
          //关闭连接
          websocketclose(e) {
            // console.log('断开连接', e)
          },
        }
    };
</script>

<style lang="scss" scoped>
    #bottomRight {
      padding: 10px 20px 0;
      width: 350px;
      /*margin-top: 20px;*/
      height: 600px;

      .text {
        width: 100%;
        text-align: center;
        /*height: 50px;*/
        /*line-height: 50px;*/
        /*margin-top: 20px;*/
        font-size: 45px;
        /*font-weight: 700;*/
        color: #2dd5fc;
      }

      .bott-let {
        width: 100%;
        height: 70px;
        color: #FFFFFF;
        /*background-color: #1c84c6;*/
        line-height: 70px;
        font-size: 32PX;
        text-align: center;
        margin-top: 18px;
      }

      .shuzi {
        background-color: #2dd5fc;
        border-radius: 5px;
        color: black;
        height: 90px;
        font-size: 80px;
        margin-top: 10px;
        width: 70%;
        text-align: center;
        line-height: 90px;
        margin-left: 60px;
        font-weight: 600;

      }
    }
</style>
